<template>
  <div style="margin-left: 50px; line-height: 20px;">
    <el-card
        style="color: black; font-size: 18px; font-style: normal; font-weight: 500; line-height: 10px; text-align: left; background-color: white;">
      <div
          style="color: black; font-size: 18px; font-style: normal; font-weight: 500; line-height: 10px; text-align: left; background-color: white;">
        个人资料
      </div>
      <el-divider/>
      <el-row>
        <el-col :span="16">
          <div
              style="padding: 20px 0;color: black;font-size: 16px;font-style: normal;font-weight: 500;line-height: 24px;text-align: left;">
            基本信息
          </div>
          <el-form label-position="left" label-width="80px">
            <el-form-item label="昵称">
              <el-input maxlength="20" :placeholder="user.nickname" v-model="user.nickname"></el-input>
            </el-form-item>
            <el-form-item label="开始工作">
              <el-date-picker v-model="user.start_work" type="month" :placeholder="user.start_work"/>
            </el-form-item>
            <el-form-item label="职业方向">
              <el-select v-if="user.career_direction==null" class="m-2" placeholder="Select" v-model="user.career_direction">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
              <el-select v-else v-model="user.career_direction" class="m-2" :placeholder="user.career_direction">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-if="user.position==null" maxlength="50" placeholder="请输入你的职位" v-model="user.position"></el-input>
              <el-input v-else maxlength="50" :placeholder="user.position" v-model="user.position"></el-input>
            </el-form-item>
            <el-form-item label="公司">
              <el-input v-if="user.company==null" maxlength="50" placeholder="请输入你的公司" v-model="user.company"></el-input>
              <el-input v-else maxlength="50" :placeholder="user.company" v-model="user.company"></el-input>
            </el-form-item>
            <el-form-item label="个人主页">
              <el-input v-if="user.personal_homepage==null" maxlength="100" placeholder="请输入你的个人主页" v-model="user.personal_homepage"></el-input>
              <el-input v-else maxlength="100" :placeholder="user.personal_homepage" v-model="user.personal_homepage"></el-input>
            </el-form-item>
            <el-form-item label="个人介绍">
              <el-input v-if="user.personal_introduction==null" maxlength="100"
                        placeholder="请填写职业技能,擅长的事情,兴趣爱好等"
                        v-model="user.personal_introduction"></el-input>
              <el-input v-else maxlength="100" :placeholder="user.personal_introduction"
                        v-model="user.personal_introduction"></el-input>
            </el-form-item>
          </el-form>
          <div
              style="padding: 20px 0;color: black;font-size: 16px;font-style: normal;font-weight: 500;line-height: 30px;text-align: left"></div>
          <!--          <el-form-item label="兴趣标签">-->
          <!--            <el-input maxlength="20" placeholder="请从下列标签中至少选择一项" style="background-color: white"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button style="margin-left: 80px" type="primary" @click="save()">保存修改</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form label-width="50px" style="width: 100%;border-radius: 50%">
            <el-form-item label="用户头像" class="avatar-upload">
              <div style="width: 60%; display: inline-block; " v-if="user.avatar && user.avatar!= ''">
                <img @click="handleClickAvatar" :src="user.avatar" style="margin-left:5%;height:120px;width:120px;border-radius: 50%">
              </div>
              <div style="width: 60%; display: inline-block; " v-else>
                <img :src=dialogImageUrl style="margin-left:5%;height:120px;width:120px;border-radius: 50%">
              </div>
              <div style="width: 40%; display: inline-block;">
                <el-upload
                    ref= 'uploadRef'
                    action='http://123.60.129.240:49380/upload/uploadImage'
                    :limit="1"
                    :before-upload="beforeUpload"
                    :headers="headers"
                    :file-list="fileList"
                    :show-file-list="false"
                    :on-preview="handlePictureCardPreview"
                    :on-success="handleSuccess"
                >
                </el-upload>
              </div>
              <div style="font-size: 15px;color: grey;margin-left: 24px">点击修改头像</div>
              <!--              <el-upload-->
<!--                  v-model:file-list="fileList"-->
<!--                  drag-->
<!--                  action='http://localhost:28000/upload/uploadImage'-->
<!--                  name="file"-->
<!--                  list-type="picture-card"-->
<!--                  :on-preview="handlePictureCardPreview"-->
<!--                  :on-remove="handleRemove"-->
<!--                  :on-success="handleSuccess"-->
<!--                  :headers="headers"-->
<!--                  :limit="1"-->
<!--              >-->
<!--                <img v-if="user.avatar" :src="user.avatar" width="150" />-->
<!--                <img v-else :src="dialogImageUrl">-->
<!--              </el-upload>-->
<!--              <el-dialog v-model="dialogVisible">-->
<!--                <img w-full :src="dialogImageUrl" alt="Preview Image"/>-->
<!--              </el-dialog>-->
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>


<script setup>
import tokenAxios from "@/http/request/TokenAxios";

const options = [
  {
    value: '后端开发',
    label: '后端开发',
  },
  {
    value: '前端开发',
    label: '前端开发',
  },
  {
    value: '移动端开发',
    label: '移动端开发',
  },
  {
    value: '测试',
    label: '测试',
  },
  {
    value: '数据开发',
    label: '数据开发',
  },
]

import {ref} from 'vue'
import {Plus} from '@element-plus/icons-vue'

import {ElMessage} from 'element-plus'
import qs from "qs";
import axios from "axios";

const user = ref(getUser());

const uploadRef = ref();
const handleClickAvatar = () => {
  uploadRef.value.$el.querySelector('input').click()
};

const headers = {
  'Authorization': user.value.token
};
/*********上传相关开始**********/
const fileList = ref([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleSuccess = (response, uploadFile, uploadFiles) => {
  // response=uploadFile.response=JsonResult
  user.value.avatar = response.data; //把上传成功的图片路径给到user对象
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

const beforeUpload = (uploadFile) => {
  const fileType = uploadFile.type //获取文件类型
  const isImage = fileType.indexOf('image') != -1 // 判断是否是图片类型
  const isLt10M = uploadFile.size / 1024 / 1024 < 10;
  if (!isImage) {
    ElMessage.error('请上传图片!');
  }
  if (!isLt10M) {
    ElMessage.error('上传图片大小不能超过 10MB!');
  }
}
/*********上传相关结束**********/

const save = () => {
  tokenAxios.post(BASE_URL+':49280/users/info/update',user.value).then((response)=>{
    if (response.state==20000){
      ElMessage.success("修改完成!");
    }
  });
}

</script>

<style>
.avatar-upload {
  border-radius: 50%;
}
</style>
